<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <div>
            <p>请输入用户名</p>
            <input type="text" placeholder="请输入用户名">
        </div>
        <div>
            <p>请输入住址</p>
            <input type="text" placeholder="请输入住址">
        </div>
        <div>
            <p>请输入手机号</p>
            <input type="text" placeholder="请输入手机号">
        </div>
        <assembly :outtermsg="msg"></assembly>
        <globalassembly></globalassembly>

    </div>
    <script>
        Vue.component('globalassembly',{
            template:'' +
            '<div>\n' +
            '  <p>请输入身份证{{msg}}</p>\n' +
            '  <input type="text" placeholder="请输入身份证号">\n' +
            '</div>',
            data(){
                return{
                    msg:'这个是global assembly中的msg'
                }
        }})
        const assembly={
            template:'' +
            '<div>\n' +
            '  <p>{{outtermsg}}{{msg}}</p>\n' +
            '  <input type="text" :placeholder="outtermsg">\n' +
            '</div>',
            data(){
                return{
                    msg:'这个是global assembly中的msg'
                }
            },
            props: ['outtermsg']
        }

    const vm = new Vue({
      el: '#app',
        data(){
          return{
              msg:"快乐学习"
          }
        },
        components:{
          assembly
        }

    })
    </script>
  </body>
</html>